// 联合类型
function css(el: HTMLElement, attr: string, value: string | number) {

}

let box1 = document.querySelector('div');
if (box1) {
  css(box1, 'width', '100px');
  css(box1, 'height', 100);
}

// 交叉类型
interface o1 {
  x: number; y: string;
}
interface o1 {
  z: number;
}

// 要使用es6语法
let o = Object.assign({}, { x: 1, y: 'zmouse' }, { z: 2 })

let arr = [1, 2, 3];
let arr2 = [...arr, 10, 20];


// 字面量类型
function setPosition(ele: Element, directtion: 'left' | 'top' | 'right' | 'bottom') {

}

let box2 = document.querySelector('div');
if (box2) {
  setPosition(box2, 'left');
  // 报错
  // setPosition(box2, 2);
}

// 类型别名
type dir = 'left' | 'top' | 'right' | 'bottom'
function setPosition2(ele: Element, directtion: dir) {
  // ...
}

type callback = (a: string) => string;
let fn2: callback = function a(s) {
  return s
}

// interface与type的区别
// interface
// 1、只能描述 object/class/function
// 2、同名interface 自动合并，利于扩展

// type
// 1、不能重名
// 2、能描述所有数据

// 类型推导
// 只发生在初始化变量、设置函数默认参数值、返回函数值
let a = 'kkb';
function fn(a = 1) {
  // ...
  if (true) {
    return 1
  } else {
    return '2'
  }
}

// 类型断言
let img = document.querySelector('#img');
if (img) {
  // 语法一：
  (<HTMLImageElement>img).src;
  // 语法二：
  (img as HTMLImageElement).src;
}